<template>
  <div class="top_title comWidth">
    <ul class="top_list clear">
      <li class="list_item"  @mouseenter="dropEnter" @mouseleave="dropLeave">
        <a>名字</a>
        <ul :class="{list_content:true,hide:hideDrop}">
          <li><a>关于我</a></li>
          <li><a @click="loginOut">退出</a></li>
        </ul>
      </li>
      <li class="list_item"><a href="#">发博文</a></li>
      <li class="list_item"><a href="#">查看评论</a></li>
    </ul>
  </div>
</template>

<script>
  import bus from "./../bus"

  export default {
    name: "TopTitle",
    data(){
      return{
        hideDrop:true
      }
    },
    mounted(){
    },
    methods:{
      dropEnter(){
        this.hideDrop = false;
      },
      dropLeave(){
        this.hideDrop  = true;
      },
      loginOut(){
        localStorage.removeItem("token");
        this.$router.push("/");
      }
    }
  }
</script>

<style scoped>
  .top_list li.list_item {
    float: left;
    padding: 0 20px;
    position: relative;
    height: 20px;
    cursor: pointer;
  }
  .top_list li.list_item ul.list_content {
    position: absolute;
    top: 20px;
    left: 20px;
  }
</style>
